<template>
  <scroll-view scroll-y="true" class="scroll-container">

    <view class="module-box">
      <view class="module-title">泉州探索</view>
      <swiper 
        indicator-dots="true" 
        autoplay="true" 
        interval="3000" 
        duration="500"
        class="banner-swiper"
      >
        <swiper-item>
          <image src="/static/city1.png" mode="aspectFill" class="banner-img" />
        </swiper-item>
        <swiper-item>
          <image src="/static/city2.jpg" mode="aspectFill" class="banner-img" />
        </swiper-item>
        <swiper-item>
          <image src="/static/city3.jpg" mode="aspectFill" class="banner-img" />
        </swiper-item>
        <swiper-item>
          <image src="/static/city4.jpg" mode="aspectFill" class="banner-img" />
        </swiper-item>
        <swiper-item>
          <image src="/static/city5.jpg" mode="aspectFill" class="banner-img" />
        </swiper-item>
      </swiper>
    </view>

  
    <view class="module-box">
      <view class="module-title">泉州介绍</view>
      <div class="rich-text" v-html="cityIntro"></div>
    </view>

    <view class="module-box">
      <view class="module-title">探索进度</view>
      <progress :percent="60" show-info stroke-width="6" class="progress-bar" />
    </view>

    <view class="module-box">
      <view class="module-title">选择城市</view>
      <picker 
        mode="region" 
        :value="region" 
        @change="onRegionChange"
        class="picker"
      >
        <view class="picker-text">{{ region[0] }} - {{ region[1] }} - {{ region[2] }}</view>
      </picker>
    </view>

  
    <view class="module-box">
      <view class="module-title">偏好设置</view>
    
      <div class="preference-item">
        <span>出行方式：</span>
        <radio-group @change="handleTravelModeChange" class="radio-group">
          <label class="radio-label">
            <radio value="bus" :checked="travelMode === 'bus'" />公交
          </label>
          <label class="radio-label">
            <radio value="drive" :checked="travelMode === 'drive'" />自驾
          </label>
          <label class="radio-label">
            <radio value="walk" :checked="travelMode === 'walk'" />步行
          </label>
        </radio-group>
      </div>
   
      <div class="preference-item">
        <span>显示推荐景点：</span>
        <switch :checked="showRecommend" @change="handleShowRecommendChange" />
      </div>
      
      <div class="preference-item">
        <span>探索半径：{{ radius }}km</span>
        <slider :value="radius" :min="1" :max="20" @change="handleRadiusChange" class="slider" />
      </div>
    </view>

  
    <view class="module-box">
      <view class="module-title">泉州宣传</view>
  
      <view class="media-item">
        <video 
          src="/static/city-video.mp4" 
          controls 
          poster="/static/video-poster.jpg" 
          class="video-player"
        ></video>
      </view>

          <view class="audio-box">
            <view class="audio-title">泉州背景音乐</view>
            <button 
              class="audio-btn" 
              :class="{ 'playing': isPlaying }" 
              @click="togglePlay"
            >
              {{ isPlaying ? '暂停' : '播放' }}
            </button>
            <view class="audio-desc">泉州南音 - 泉州传统乐团</view>
            <slider 
              class="audio-slider" 
              :value="audioCurrent" 
              :max="audioDuration" 
              @change="changeAudioProgress"
            />
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      
      cityIntro: `
        <h4>海上丝绸之路起点 - 泉州</h4>
        <p>历史文化：<strong>泉州</strong>是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p>
        <p>著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p>
        <p>特色文化：拥有<span style="color: #007AFF;">南音</span>、<span style="color: #007AFF;">木偶戏</span>和闽南建筑等丰富的非物质文化遗产。</p>
      `,
     
      region: ["当前选择:福建省", "泉州市", "丰泽区"],

      travelMode: "bus",

      showRecommend: true,
    
      radius: 5,
	 
	        audio: null,
	        isPlaying: false,
	        audioCurrent: 0,
	        audioDuration: 100
    };
  },
   onReady() {
    
      this.audio = uni.createInnerAudioContext();
      this.audio.src = "/static/city-music.mp3";
     
      this.audio.onTimeUpdate(() => {
        this.audioCurrent = this.audio.currentTime;
        this.audioDuration = this.audio.duration;
      });
     
      this.audio.onEnded(() => {
        this.isPlaying = false;
        this.audioCurrent = 0;
      });
    },
  methods: {
    
    onRegionChange(e) {
      this.region = e.detail.value;
    },

    handleTravelModeChange(e) {
      this.travelMode = e.detail.value;
    },
 
    handleShowRecommendChange(e) {
      this.showRecommend = e.detail.value;
    },
 
    handleRadiusChange(e) {
      this.radius = e.detail.value;
    },
	
	    togglePlay() {
	      if (this.isPlaying) {
	        this.audio.pause();
	      } else {
	        this.audio.play();
	      }
	      this.isPlaying = !this.isPlaying;
	    },
	  
	    changeAudioProgress(e) {
	      this.audio.seek(e.detail.value);
	    },
	  },
	  onUnload() {
	 
	    if (this.audio) {
	      this.audio.destroy();}
  },
};
</script>

<style scoped>

.scroll-container {
  height: 100vh;
  width: 100%;
  background-color: #f5f5f5;
  padding: 15rpx;
  box-sizing: border-box;
}

.module-box {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}


.module-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #eee;
}

.banner-swiper {
  width: 100%;
  height: 400rpx;
  border-radius: 8rpx;
  overflow: hidden;
}
.banner-img {
  width: 100%;
  height: 100%;
}


.rich-text {
  line-height: 1.8;
  color: #666;
  font-size: 28rpx;
}
.rich-text h4 {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 15rpx;
}
.rich-text strong {
  color: #333;
}


.progress-bar {
  width: 100%;
  margin-top: 10rpx;
}


.picker {
  width: 100%;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
  box-sizing: border-box;
}
.picker-text {
  font-size: 28rpx;
  color: #333;
}


.preference-item {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  font-size: 28rpx;
}
.preference-item:last-child {
  margin-bottom: 0;
}
.preference-item span {
  width: 200rpx;
  color: #666;
}
.radio-group {
  display: flex;
  gap: 30rpx;
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.slider {
  flex: 1;
  margin-left: 20rpx;
}


.media-item {
  margin-bottom: 25rpx;
}
.video-player {
  width: 100%;
  height: 400rpx;
  border-radius: 8rpx;
}


.audio-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
}
.audio-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
}
.audio-btn {
  width: 160rpx;
  height: 80rpx;
  background-color: #2c69ff;
  color: #fff;
  border-radius: 8rpx;
  margin-bottom: 15rpx;
}
.audio-btn.playing {
  background-color: #ff6b6b;
}
.audio-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
}
.audio-slider {
  width: 100%;
}
</style>